<template>
  <view class="webview-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <view class="navbar-title">
        <text>{{ pageTitle }}</text>
      </view>
      <view class="navbar-right">
        <text class="share-icon" @click="sharePage">分享</text>
      </view>
    </view>
    
    <!-- web-view组件 -->
    <web-view 
      :src="webUrl" 
      @message="handleMessage"
      @error="handleError"
      @load="handleLoad"
    ></web-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const webUrl = ref('')
const pageTitle = ref('详情')

// 页面加载时获取参数
onLoad((options) => {
  console.log('webview onLoad', options)
  
  if (options.url) {
    webUrl.value = decodeURIComponent(options.url)
    console.log('webUrl', webUrl.value)
  }
  
  if (options.title) {
    pageTitle.value = decodeURIComponent(options.title)
  }
})

// 返回上一页
const goBack = () => {
  // 获取当前页面栈
  const pages = getCurrentPages();
  
  // 如果页面栈长度大于1，说明可以返回
  if (pages.length > 1) {
    uni.navigateBack({
      delta: 1
    });
  } else {
    // 如果已经是第一个页面，可以选择跳转到首页或其他处理方式
    console.log('已经是第一个页面，无法返回');
    
    // 可以选择跳转到首页
    uni.switchTab({
      url: '/pages/leagueMatchesHome/index'
    });
  }
}

// 分享页面
const sharePage = () => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  })
}

// 处理web-view消息
const handleMessage = (event) => {
  console.log('web-view message', event)
}

// 处理web-view错误
const handleError = (event) => {
  console.error('web-view error', event)
  uni.showToast({
    title: '页面加载失败',
    icon: 'none'
  })
}

// 处理web-view加载完成
const handleLoad = (event) => {
  console.log('web-view loaded', event)
}

// 分享给朋友
const onShareAppMessage = () => {
  return {
    title: pageTitle.value,
    path: `/pages/webview/index?url=${encodeURIComponent(webUrl.value)}&title=${encodeURIComponent(pageTitle.value)}`
  }
}

// 分享到朋友圈
const onShareTimeline = () => {
  return {
    title: pageTitle.value,
    query: `url=${encodeURIComponent(webUrl.value)}&title=${encodeURIComponent(pageTitle.value)}`
  }
}
</script>

<style scoped lang="scss">
.webview-page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
  z-index: 1000;
  
  .navbar-left {
    width: 80rpx;
    display: flex;
    align-items: center;
    
    .back-icon {
      font-size: 48rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .navbar-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
  
  .navbar-right {
    width: 80rpx;
    display: flex;
    justify-content: flex-end;
    
    .share-icon {
      font-size: 28rpx;
      color: #007aff;
    }
  }
}

web-view {
  flex: 1;
  width: 100%;
}
</style> 